<html lang="en"> <head> <script src="https://d3js.org/d3.v3.js"></script> </head> <body>
    <script type="text/javascript" charset="utf-8">
        var svg = d3.select("body").append("svg").attr("height", 600)
        // 在 1 秒(1000毫秒) 内将圆心坐标由 100 变为 300
        var circle1 = svg.append("circle").attr("r", 45).style("fill", "green")
            .attr("cx", 100).attr("cy", 100)  // 初始位置
            .transition()                     // 启动过渡效果
            .duration(1000)                   // 指定过渡的持续时间, 单位为毫秒
            .ease("bounce")                   // 指定过渡的方式, bounce(在最终状态处弹跳几次)
            .delay(500)                       // 单位毫秒, 可以对整体指定延迟, 也可以对个别指定延迟
            .attr("cx", 300);                 // 结束时所处位置
        // 既移动 x 坐标, 又改变颜色
        var circle2 = svg.append("circle").attr("r", 45)
            // 在 1.5 秒内将圆心坐标由 100 变为 300, 将颜色从绿色变为红色
            .style("fill", "green").attr("cx", 100).attr("cy", 250)
            .transition().duration(1500)
            .ease("elastic")                   // 指定过渡的方式, elastic(带有弹跳的到达最终状态)
            .attr("cx", 300).style("fill", "red");
        // 既移动 x 坐标, 又改变颜色, 还改变半径
        var circle2 = svg.append("circle").attr("r", 45)
            // 在 2 秒内将圆心坐标由 100 变为 300, 将颜色从绿色变为红色, 将半径从 45 变成 25, 过渡方式采用 bounce (在终点处弹跳几次)
            .style("fill", "green").attr("cx", 100).attr("cy", 450)
            .transition().duration(2000)
            .ease("bounce")
            .attr("cx", 300).style("fill", "red").attr("r", 25);
    </script>
</body> </html>
